<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path=request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/datagrid-detailview.js"></script>
<style type="text/css">
		body {
			font-family: Arial, Helvetica, sans-serif;
			padding: 0;
			margin: 0;
		}
		
		.cs-west {
			width:200px;padding:0px;border-left:1px solid #99BBE8;
		}
</style>
<script type="text/javascript">
	function createFrame(url) {
		var s = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
		return s;
	}
	
	function formatNodes(node){
		var s = node.text;
        if(node.children){
            s+='&nbsp;<span style=\'color:blue\'>('+node.children.length+')</span>';
        }
        return s;
	}
	
	$(function(){
		$('#tt').tree({
			onClick: function(node){
				var url="<%=basePath%>building/assetmanagerGroupRoomId.action";
				var tt=$('#tt').tree('isLeaf',node.target); //判断是否叶子节点
				if(tt){
					var parentNode=$('#tt').tree("getParent",node.target);
					url+="?rId="+node.id;
					if ($('#mainTab').tabs('exists',parentNode.text+"-"+node.text)) {
			            $('#mainTab').tabs('select',parentNode.text+"-"+node.text);
			        } else {
			            $('#mainTab').tabs('add',{
			                title:parentNode.text+"-"+node.text,
			                closable:true,
			                content:createFrame(url)
			            });
			        }
				}else{
					$('#mainTab').tabs('select','About');
				}
			}
		});
	});
</script>

</head>
<body class="easyui-layout">
 <div region="west" border="true" split="true" title="Building Manager" class="cs-west">
    <h2>Basic Tree</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click the arrow on the left to expand or collapse nodes.</div>
    </div>
    <div style="margin:10px 0;"></div>
   	 <ul id="tt" class="easyui-tree" data-options="url:'<%=basePath%>/building/getAll.action',formatter:function(node){return formatNodes(node)}">
    </ul>
 </div>
 <div data-options="region:'center',title:'',border:true" id="centerPanel">
	 	<div id="mainTab" class="easyui-tabs" fit="true"> 
             <div id="tabs" title="About" style="padding:5px;">
             		<div class="easyui-layout" data-options="fit:true">
	                <div data-options="region:'north',split:true,border:false" style="height:200px">
	                	<jsp:include page="${basePath}/column-basic.jsp"></jsp:include>
	                </div>
	                <div data-options="region:'west',split:true,border:false,collapsible:false" style="width:230px;"></div>
	                <div data-options="region:'center',border:false">
	                	<jsp:include page="${basePath}/asset_tj.jsp"></jsp:include>
	                </div>
            </div>
             </div> 
            </div> 
	</div>
</body>
</html>